<script setup lang="ts">
import { useLoginHandler } from '../composable/useLogin'

const { doThirdPartyLogin } = useLoginHandler()

async function handleThirdPartyLogin(provider: 'gitee' | 'github') {
  await doThirdPartyLogin(provider)
}
</script>

<template>
  <view class="third-party-login">
    <view class="flex flex-col space-y-4">
      <!-- Gitee登录 -->
      <sar-button
        type="pale"
        theme="danger"
        size="large"
        root-style="width: 600rpx; border-radius:16px"
        @click="handleThirdPartyLogin('gitee')"
      >
        {{ $t('login.gitee_login') }}
      </sar-button>

      <!-- GitHub登录 -->
      <sar-button
        type="pale"
        theme="neutral"
        size="large"
        root-style="width: 600rpx; border-radius:16px"
        @click="handleThirdPartyLogin('github')"
      >
        {{ $t('login.github_login') }}
      </sar-button>
    </view>
  </view>
</template>

<style scoped>
.third-party-login {
  padding: 0;
}
</style>
